<template>
  <div @click="$router.push('/articledetail/' + articleData.id)">
    <div
      class="singleArticle"
      v-if="
        articleData.type == 1 &&
        articleData.cover.length > 0 &&
        articleData.cover.length < 3
      "
    >
      <div class="left">
        <div class="title">{{ articleData.title }}</div>
        <div class="info">
          {{ articleData.user.nickname }}
          {{ articleData.comment_length }}跟帖
        </div>
      </div>
      <img :src="articleData.cover[0].url | fixImgUrl" alt="" class="right" />
    </div>

    <!-- 显示3张图的是length  >=  3!!!不是 > 3-->
    <div
      class="multiArticle"
      v-if="articleData.type == 1 && articleData.cover.length >= 3"
    >
      <div class="title">{{ articleData.title }}</div>
      <div class="coverWrapper">
        <img :src="articleData.cover[0].url | fixImgUrl" alt="" class="cover" />
        <img :src="articleData.cover[1].url | fixImgUrl" alt="" class="cover" />
        <img :src="articleData.cover[2].url | fixImgUrl" alt="" class="cover" />
      </div>
      <div class="info">
        {{ articleData.user.nickname }} {{ articleData.comment_length }}跟帖
      </div>
    </div>

    <div
      class="videoArticle"
      v-if="articleData.type == 2 && articleData.cover.length > 0"
    >
      <div class="title">{{ articleData.title }}</div>
      <div class="coverWrapper">
        <img :src="articleData.cover[0].url | fixImgUrl" alt="" class="cover" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        {{ articleData.user.nickname }} {{ articleData.comment_length }} 跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["articleData"],
  // methods: {
  //  fixImgUrl（oldUrl) {
  // 原本的单独页面的过滤器
  //     if (odUrl.indexOf("http") > -1) {
  //       return oldUrl;
  //     } else {
  //       return this.$axios.defaults.baseURL + oldUrl;
  //     }
  //   },
  // },
};
</script>

<style lang="less" scoped>
.singleArticle {
  display: flex;
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .left {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
    .title {
      color: #333;
      font-size: 16 / 360 * 100vw;
    }
    .info {
      font-size: 14 / 360 * 100vw;
      color: #888;
    }
  }
  .right {
    width: 121/ 360 * 100vw;
    height: 75 / 360 * 100vw;
    object-fit: cover;
  }
}
.multiArticle {
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    color: #333;
    font-size: 16 / 360 * 100vw;
  }
  .coverWrapper {
    display: flex;
    justify-content: space-between;
    margin: 10 / 360 * 100vw 0;
    .cover {
      width: 33%;
      height: 74 / 360 * 100vw;
      object-fit: cover;
    }
  }
  .info {
    font-size: 14 / 360 * 100vw;
    color: #888;
  }
}
.videoArticle {
  padding: 16 / 360 * 100vw;
  border-bottom: 1px solid #e4e4e4;
  .title {
    color: #333;
    font-size: 16 / 360 * 100vw;
  }
  .coverWrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10 / 360 * 100vw 0;
    .cover {
      width: 100%;
      height: 170 / 360 * 100vw;
      object-fit: cover;
    }
    .iconshipin {
      position: absolute;
      font-size: 46 / 360 * 100vw;
      color: #fff;
      border-radius: 23 / 360 * 100vw;
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
  .info {
    font-size: 14 / 360 * 100vw;
    color: #888;
  }
}
</style>